<template>
  <div class="dashboard">
    <div class="header">
      <el-card>
        <span>
          <img src="@/assets/common/head.jpg" alt="" />
        </span>
        <span class="title"> 你好，管理员，祝你开心每一天！ </span>
        <span class="info">管理员 | 青鸢科技---总裁办</span>
      </el-card>
    </div>
    <div class="main">
      <div class="left">
        <div class="calendar box-width">
          <!-- 日历 -->
          <CalendarCom />
        </div>
        <div class="announcement box-width"><el-card>公告</el-card></div>
      </div>
      <div class="right">
        <div class="apply-for box-width"><el-card>流程申请</el-card></div>
        <div class="start box-width">
          <el-card>便捷导航</el-card>
        </div>
        <div class="help box-width"><el-card>帮助</el-card></div>
      </div>
    </div>
  </div>
</template>

<script>
import CalendarCom from './components/calendar-com.vue'
export default {
  name: 'Dashboard',
  components: {
    CalendarCom
  },
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
  .header {
    position: relative;
    height: 150px;
    margin-bottom: 15px;
    .el-card {
      height: 100%;
    }
    .title {
      position: absolute;
      font-size: 26px;
      top: 42px;
      left: 140px;
    }
    .info {
      position: absolute;
      top: 90px;
      left: 140px;
      font-size: 22px;
      color: #999;
    }
  }
  .main {
    display: flex;
    .left {
      width: 55%;
      padding-right: 15px;
      .el-card {
        margin-bottom: 15px;
        height: 400px;
        width: 100%;
      }
    }
    .right {
      width: 45%;
      margin-bottom: 15px;
      .el-card {
        height: 240px;
        margin-bottom: 15px;
        width: 100%;
      }
    }
  }
}
</style>
